<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
    .ivu-card-head-inner, .ivu-card-head p{
    	height: 32px;
    }
</style>

<template>
    <div>
        <Row class="margin-top-10">
            <Col span="24">
                <Card>
                    <p slot="title"  >
                    	<span style="margin: 0 10px; float:left; font-size: 16px;">{{scenesName}}&nbsp;&nbsp;&nbsp;&nbsp;{{scenesScore}}分</span>
                    	<span style="margin: 0 10px;float: right;"><Button type="primary" icon="android-add" @click="add">新增</Button></span>
                    </p>
                    <Row :gutter="10">
                        <Col span="24">
                            <div>
                                <can-edit-table 
                                    refs="table4" 
                                    v-model="editInlineAndCellData" 
                                    @on-edit="edit"
                                    @on-delete="deletes"
                                    :columns-list="editInlineAndCellColumn"
                                ></can-edit-table>
                            </div>
                            
                        </Col>
					    <Modal v-model="modal1"
					        :title="getModelTital"
					        @on-ok="ok"
					        @on-cancel="cancel">
					        <Form :model="formItem">
						        <formItem label="名称:">
						            <Input style="width: 400px" v-model="formItem.illegalName" placeholder="请输入名称"></Input>
						        </formItem>
						        <formItem label="分值:">
						            <Input style="width: 400px" v-model="formItem.illegalScore" placeholder="请输入分数"></Input>
						        </formItem>
						    </Form>
					    </Modal>
					    <Modal v-model="editModal1"
					        :title="getModelTital"
					        @on-ok="editOk"
					        @on-cancel="cancel">
					        <Form :model="formItem">
						        <formItem label="名称:">
						            <Input style="width: 400px" v-model="formItem.illegalName" placeholder="请输入名称"></Input>
						        </formItem>
						        <formItem label="分值:">
						            <Input style="width: 400px" v-model="formItem.illegalScore" placeholder="请输入分数"></Input>
						        </formItem>
						    </Form>
					    </Modal>
                    </Row>
                </Card>
            </Col>
        </Row>
    </div>  
</template>

<script>
import 'jquery';
import tableData from './fault_detail.js';
import canEditTable from '../components/canEditTable.vue';
import {adminId,accessToken} from '../components/date.js';
import {baseurl} from '../../libs/util';

export default {
    name: 'editable-table',
    components: {
        canEditTable
    },
    
    data () {
        return {
        	scenesName:'',
        	scenesScore:'',
            tableData: [],
            editInlineAndCellColumn: [],
            editInlineAndCellData: [],
            modal1: false,
            editModal1:false,
	        formItem: {},
	        flag: 'add'
        };
    },
    mounted:function(){
		this.team();
	},
	computed: {
	    getModelTital: function () {
	      return this.flag === 'add'?'添加行为记录':'修改行为记录';
	    }
  	},
    methods: {
    	team : function(){
    		console.log(this.$route.query.row)
    		var row = JSON.parse(this.$route.query.row);
    		this.scenesName = row.scenesName;
    		this.scenesScore = row.scenesScore;
    		var scenesId = this.$route.query.scenesId
    		var _self=this;
		  	$.ajax({
	  			url : baseurl+'users/'+adminId+'/scenes/'+scenesId+'/detail',
				type : 'get',
				data:{
					"currentPage":1,
					"pageSize":9999,
				},
				dataType : 'json',
				success : function(data) {
					_self.dataObj = {}; 
					var result = data.result.illegalInfoList;
					_self.dataObj = result;
		            _self.editInlineAndCellData = _self.dataObj;
				}
	  		});
		},
        getData () {
            this.tableData = tableData.table1Data;
            this.editInlineAndCellColumn = tableData.editInlineAndCellColumn;
        },
        //新增
        add(e){
        	this.modal1 = true ;
        	this.flag ='add';
        },
        //编辑
        edit (e) {
        	this.flag ='';
        	this.editModal1 = true;
        	this.formItem = e;
        },
       	//删除
        deletes (e) {
        	var th=this;
            $.ajax({
	  			type: "DELETE",
	  			url:baseurl+'users/'+adminId+'/illegal/'+e.illegalId,
	  			async: false,
	  			dataType: 'json',
				contentType: "application/json; charset=utf-8",
	  			beforeSend: function(request) {
					request.setRequestHeader("accessToken", accessToken);
				},
				success: function(data) {
					
					if(data.code == 1){
						th.$Message.success('删除成功');
						th.team();//刷新
					}else{
						th.$Message.error('删除失败');
					}
				}
	  		});
        },
        //提交
        ok () {
        	console.log(this.formItem)
        	this.formItem.scenesId = this.$route.query.scenesId;
	  		var th = this;
	  		$.ajax({
	  			type: "POST",
	  			url:baseurl+'users/'+adminId+'/illegal',
	  			dataType: 'json',
	  			data: JSON.stringify(th.formItem),
	  			async: false,
				contentType: "application/json; charset=utf-8",
	  			beforeSend: function(request) {
					request.setRequestHeader("accessToken", accessToken);
				},
				success: function(data) {
					if(data.code == 1){
						th.$Message.success('更改成功');
						th.team();//刷新
						th.formItem = {}; 
					}else{
						th.$Message.error('更改失败');
					}
				}
	  		});
        },
        editOk(){
        	console.log(this.formItem)
        	var illegalId = this.formItem.illegalId;
        	this.formItem.scenesId = this.$route.query.scenesId;
	  		var th = this;
	  		$.ajax({
	  			type: "PUT",
	  			url:baseurl+'users/'+adminId+'/illegal/'+illegalId,
	  			dataType: 'json',
	  			data: JSON.stringify(th.formItem),
	  			async: false,
				contentType: "application/json; charset=utf-8",
	  			beforeSend: function(request) {
					request.setRequestHeader("accessToken", accessToken);
				},
				success: function(data) {
					if(data.code == 1){
						th.$Message.success('更改成功');
						th.team();//刷新
						th.formItem = {}; 
					}else{
						th.$Message.error('更改失败');
					}
				}
	  		});
        },
        cancel () {
            this.formItem = '';
        }
    },
    created () {
        this.getData();
    }
};
</script>
